<div class="dialog-header">
    <div class="folder-dialog-info">
        <div class="row align-items-center justify-content-between ml-1 mt-1">
            <img class="thumbnail" [src]="data.thumbnailPath" alt="">
            <div class="col-md-auto col-sm-auto">
                <div class="content-header">
                    <h5>{{data.name | limitTo: 25}} Version hisotry</h5>
                </div>
            </div>
        </div>
    </div>
    <div class="close-icon" (click)="closeDialog()">
        <span class="material-icons cursor-pointer">
            close
        </span>
    </div>
</div>
<div class="d-content">
    <div class="box box-primary">
        <div class="box-body">
            <table class="table">
                <tbody>
                    <tr *ngFor="let version of data.documentVersions" class="d-flex">
                        <td>{{version.modifiedDate | date:"dd/MM/yyyy hh:mm a"}}</td>
                        <td>
                            Added By {{version.userName}}
                        </td>
                        <td>{{version.size | filesize }}</td>
                        <td>
                            <span *ngIf="version.isCurrentVersion" class="badge badge-success">Current Version</span>
                            <div *ngIf="!version.isCurrentVersion">
                                <span (click)="onDocumentView(version)" class="material-icons-outlined mr-2 text-primary" matTooltip="view" role="button">
                                    visibility
                                </span>
                                <span (click)="downloadDocument(version)" role="button" class="mr-2 text-primary" matTooltip="Download">
                                    <mat-icon> download</mat-icon>
                                </span>
                                <span (click)="restoreDocumentVersion(version)" role="button" matTooltip="Restore to Current Version"
                                    class="material-icons-outlined text-primary">
                                    restore
                                </span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>